<template>  
    <el-container>
      <el-header style="height:60px; border-bottom: 1px solid #eee;">  
        <div style="float:left;width:240px;height:50px;font-size: 36px;margin-top:5px">图书借还管理</div>
        <div style="float:left;width:80px;height:30px;text-align:bottom;margin-top:25px">
           <el-button
              size="medium"  type="primary"
              @click="addBorrow()">增加借阅记录</el-button></div>
      </el-header>

      <el-main>
      <el-table
        :data="tableData.filter(data => !search || data.id.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        max-height="680"> 
        <el-table-column
          prop="id"
          label="ID"
          min-width="15%">
        </el-table-column>       
        <el-table-column
          prop="bookName"
          label="图书名"
          min-width="20%">
        </el-table-column>

        <el-table-column
          prop="username"
          label="用户名"
          min-width="15%">                 
        </el-table-column>

        <el-table-column
          prop="phone"
          label="电话"
          min-width="20%">
        </el-table-column>

        <el-table-column
          prop="start"
          label="借阅时间"
          min-width="20%">
        </el-table-column>

        <el-table-column
          prop="end"
          label="归还时间"
          min-width="20%">
        </el-table-column>

         <el-table-column min-width="28%" align="center">
         
          <template #default="{ row }">            
            <el-button
              size="medium" type="info"
              @click="handleEdit(row)">
              修改归还</el-button>
            <el-button
              size="medium"
              type="danger"
              @click="handleDelete(row)">
              归还图书</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-main>
          <AddBorrow @onReload = "addBorrow" ref="addBorrow"></AddBorrow> 
          <EditBorrow @onReload = "handleEdit" ref="editBorrow"></EditBorrow>
    </el-container>  
</template>
<script>
import AddBorrow from "./addBorrow.vue"
import EditBorrow from "./editBorrow.vue"
export default {
  name: 'BorrowManager',
  components:{ AddBorrow,EditBorrow },
  data() {
    return {  
        loading: false,         
        search: '',  
        tableData: [],               
      }        
   },
  methods: { 
    getAllBorrow(){ 
      this.$api.post('borrow/getAllBorrow', null).then((res) => {                        
        if (res.code === 200) {     
             this.tableData = res.data
          } else {
            alert('获取借阅记录数据失败!')
          }
          })              
    },
    addBorrow(){
        //alert('adduser dialog')        
        this.$refs.addBorrow.dialogFormVisible = true
        this.getAllBorrow()
    },
    handleEdit(row) {
        //alert(row.username)             
        this.$refs.editBorrow.form.bookName =  row.bookName
        this.$refs.editBorrow.form.id = row.id     
        this.$refs.editBorrow.form.username =  row.username  
        this.$refs.editBorrow.form.phone =  row.phone  
        this.$refs.editBorrow.form.start =  row.start  
        this.$refs.editBorrow.form.end =  row.end  
        this.$refs.editBorrow.dialogFormVisible = true
        this.getAllBorrow();   
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该借阅记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '确认删除!'
          });
          let data = {
            id: row.id,
            bookName: row.bookName,
            username: row.username,
            phone: row.phone,
            start: row.start,
            end: row.end,
          }        
          this.$api.post('borrow/deleteBorrow', data)
              .then(res => { 
                if (res.code === 200) {                   
                  this.getAllBorrow()                 
                }              
              })              
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })          
        }) 
      }
      },

  
    mounted: function () {     
        this.getAllBorrow()
    },
    }

</script>